<template>
  <div class="postsBox">
      <!-- 我的帖子页面 -->
      <div class="title">
          <span>我的帖子</span>
          <span>分类</span>
      </div>
      <ul class="ul--countent">
          <li class="li-countent" v-for="(item,index) in list" :key="index">
              <div class="img">
                  <img :src="item.img" alt="">
              </div>
              <div class="text">
                  <p class="text-title">
                      <span>{{item.title}}</span>
                      <span>5/23 16:15</span>
                  </p>
                  <p class="text-c">
                      {{item.text}}
                  </p>
                  <div class="zan">
                    <span><img src="./img/点赞.png" alt=""></span>
                    <span>22</span>
                    <span><img src="./img/评论.png" alt=""></span>
                    <span>22</span>
                  </div>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
        return {
            list:[
                {
                    title:'岁月不老,一世倾城',
                    text:'时光的流逝,如缓缓流过的小溪,再怎样努力也无法逆转它的方向;这个午后,我站在开满丁香花的树下目送你走远,紫色的小花散发着幽幽的暗香,我忍不住深吸一口气...',
                    img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607587052171&di=2322b2f0557cbeac7bc688342b771872&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F7%2F53b3a304b616d.jpg'
                },
                {
                    title:'岁月不老,一世倾城',
                    text:'时光的流逝,如缓缓流过的小溪,再怎样努力也无法逆转它的方向;这个午后,我站在开满丁香花的树下目送你走远,紫色的小花散发着幽幽的暗香,我忍不住深吸一口气...',
                    img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607516246968&di=294baacb72674ac647ea73b97cf798b9&imgtype=0&src=http%3A%2F%2Fimg.article.pchome.net%2F00%2F53%2F86%2F83%2Fpic_lib%2Fs960x639%2F5s960x639.jpg'
                },
                {
                    title:'岁月不老,一世倾城',
                    text:'时光的流逝,如缓缓流过的小溪,再怎样努力也无法逆转它的方向;这个午后,我站在开满丁香花的树下目送你走远,紫色的小花散发着幽幽的暗香,我忍不住深吸一口气...',
                    img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607516246967&di=a612170edbfdd6ac926e4c89b580e809&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F579995b436872.jpg'
                },
                
            ]
        }
    }
}
</script>

<style>
.postsBox{
    width: 900px;
    height: 780px;
    background: #fff;
}
.postsBox .title{
    height: 50px;
    width: 100%;
    line-height: 50px;
    color: #999;
    text-align: left;
    border-bottom: 1px solid #ccc;
}
.postsBox .title>span:first-child{
    margin-left: 50px;
}
.postsBox .title>span:last-child{
    margin-left: 730px;
}
.postsBox .ul--countent{
    padding: 0 20px;
}
.postsBox .li-countent{
    width: 100%;
    height: 140px;
    border-bottom: 1px solid #ccc;
    padding: 20px 0;
}
.postsBox .img{
    width: 140px;
    height: 140px;
    float: left;
    background: #115500;
}
.postsBox .img>img{
    width: 100%;
    height: 100%;
}
.postsBox .text{
    width: 700px;
    height: 140px;
    float: right;
}
.postsBox .text-title{
    text-align: left;
    font-size: 20px;
    height: 30px;
    margin-bottom: 10px;
}
.postsBox .text-title>span:last-child{
    margin-left: 450px;
    font-size: 16px;
    color: #999;
}
.postsBox .text-c{
    text-align: left;
    font-size: 16px;
    height: 60px ;
}
.postsBox .zan{
    margin-top: 5px;
    text-align: right;
}
.postsBox .zan img{
    width: 20px;
    position: relative;
    bottom: -8px;
    margin: 5px;
}
</style>